<template>
  <div>
    <!-- v-model 修饰符,来增强 b-model 的功能 -->
    <!-- .number 在给绑定给变量是,先转成number 类型,
    原理:是利用了 parseFloat()方法转换的 可以保留小数 -->
    年龄: <input type="text" v-model.number="age" />
    <hr />
    <!-- .trim 在绑定给变量是,自动调用trim()后在赋值 去除前后空格,中间的空格去不了 -->
    姓名: <input type="text" v-model.trim="name" />
    <hr />
    <!-- change 触发条件:当用户修改内容并失去焦点才出发
         input : 触发条件:当用户修改内容会触发 时时触发
        v-model 双向绑定数据的时机,默认使用的input 事件 -->
    <!-- .lazy 懒  将默认使用的input 事件,改为change 事件,可以提高一点点性能 -->
    自我介绍: <textarea v-model.lazy="intro"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      name: "",
      intro: "",
    };
  },
};
</script>

<style>
</style>